<template>
  <div class="br-layout-relative">
    <div class="br-layout-relative">
      <div class="br-layout-absolute br-border-bottom" style="height: 40px;line-height: 40px;">
        <el-button type="primary" style="margin-left: 10px;" size="mini" @click="toAddConnrction">新建数据连接</el-button>
      </div>
      <div class="br-layout-absolute" style="top: 41px;left: 10px;right: 10px;">
        <div class="br-item-group" v-loading="loading">
          <div class="br-item" v-for="(item,index) in databases" :key="index" @click="show(index)" :style="{'color':databaseIndex===index?'#3685f2':''
        ,'background-color':databaseIndex===index?'#f2f7fe':''}">
            <div class="tag-icon"><i class="iconfont icon-shujuku1"></i>&nbsp;</div>
            <div class="text" v-if="!item.edit">{{item.displayName}}</div>
            <div class="text" v-if="item.edit">
              <el-input style="width: 170px;" v-focus size="mini" @blur="rename(item)" v-model="item.displayName"></el-input>
            </div>
            <el-popover placement="right-start" width="150" v-model="visible" trigger="manual">
              <div class="br-operation" @click="test(item)">
                <div class="icon"><i class="el-icon-link"></i></div>
                <div class="text">测试连接</div>
              </div>
              <div class="br-operation" @click="edit(item)">
                <div class="icon"><i class="el-icon-edit"></i></div>
                <div class="text">编辑</div>
              </div>
              <div class="br-operation" @click="item.edit=true;visible=false;">
                <div class="icon"><i class="el-icon-edit-outline"></i></div>
                <div class="text">重命名</div>
              </div>
<!--              <div class="br-operation" @click="copy(item)">
                <div class="icon"><i class="el-icon-document-copy"></i></div>
                <div class="text">复制</div>
              </div> -->
              <div class="br-operation" @click="remove(item)">
                <div class="icon"><i class="el-icon-delete"></i></div>
                <div class="text">删除</div>
              </div>
              <div class="operate-icon" slot="reference" :style="{'display':databaseIndex===index?'block':'none'}">
                <i class="el-icon-more" @click="visible=true"></i>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialog" :showClose="false">
      <div class="br-flex-center" v-loading="testLoading" element-loading-text="正在测试连接,请稍等">
        <div class="br-layout-relative br-flex-center" style="width: 450px;height: 250px;">
          <div class="br-text-align-center" style="width: 270px;height: 170px;" v-if="testStatus===0">
            <img style="margin-bottom: 20px;width: 96px;height: 96px;" src="../../../../../../assets/success.png"></img>
            <div class="br-margin-bottom">连接成功</div>
          </div>
          <div class="br-text-align-center" style="width: 270px;height: 170px;" v-else-if="testStatus===1">
            <img style="margin-bottom: 20px;width: 96px;height: 96px;" src="../../../../../../assets/fail.png"></img>
            <div class="br-margin-bottom">测试连接失败</div>
            <el-button size="mini" @click="foldMsg?foldMsg=false:foldMsg=true">{{foldMsg?'收起信息':'展开信息'}}</el-button>
            <el-button size="mini" @click="back">返回</el-button>
            <el-button type="primary" size="mini" @click="test">重新连接</el-button>
          </div>
        </div>
      </div>
      <div class="br-layout-relative  br-textarea-view" v-if="foldMsg" style="width: 430px;max-height: 300px;margin-left: 10px;">
        {{message}}
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getList,
    remove,
    test,
    save,
    copy,
  } from '@/api/database/database'
  import {
    mapGetters
  } from 'vuex'
  export default {
    components: {},
    props: {},
    computed: {
      ...mapGetters(['connection']),
      datasourceFrom() {
        return this.connection.item;
      },
      databaseIndex() {
        return this.connection.databaseIndex;
      }
    },
    data() {
      return {
        databases: [],
        visible:false,
        loading: false,
        dialog: false,
        testStatus: -1,
        message: "",
        foldMsg: false,
        testLoading: false
      }
    },
    methods: {
      toAddConnrction() {
        this.$store.commit("CONNECTION_TEMPALTE", 1);
        this.$store.commit("CONNECTION_ITEM", null);
      },
      getList() {
        this.databases = [];
        this.loading = true;
        getList(this.searchFrom).then((res) => {
          this.loading = false;
          if (res.data.status == 200) {
            this.databases = res.data.data;
            if (this.databases && this.databases.length)
              this.show(this.databaseIndex);
          } else if (res.data.status == 500) {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
      },
      show(index) {
        this.$store.commit("CONNECTION_DATABASEINDEX", index);
        this.$store.commit("CONNECTION_ITEM", this.databases[this.databaseIndex]);
      },
      back() {
        this.dialog = false;
        this.foldMsg = false;
        this.message = "";
      },
      test() {
        this.visible=false;
        this.dialog = true;
        this.testLoading = true;
        this.testStatus = -1;
        this.foldMsg = false;
        this.message = "";
        test(this.databases[this.databaseIndex]).then((res) => {
          this.testLoading = false;
          if (res.data.status == 200) {
            this.testStatus = 0;
          } else if (res.data.status === 504) {
            this.testStatus = 1;
            this.message = res.data.msg;
          }
        })
      },
      edit(item) {
        this.visible=false;
        this.$store.commit("CONNECTION_TEMPALTE", 2);
      },
      rename(item) {
        this.visible=false;
        save(item).then((res) => {
          if (res.data.status == 200) {
            item.edit = false;
          }
        })
      },
      copy(item) {
        this.visible=false;
        this.loading = true;
        copy(item).then((res) => {
          this.loading = false;
          if (res.data.status == 200) {
            this.getList();
          }
        })
      },
      remove(item) {
        this.visible=false;
        this.$confirm('确定删除此数据吗？', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(_ => {
            remove(item.displayName).then((res) => {
              if (res.data.status == 200) {
                this.getList();
              }
            })
          })
          .catch(_ => {
            return;
          });
      },
    },
    created() {},
    mounted() {
      this.getList();
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .el-dialog__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /deep/ .el-dialog {
    position: relative;
    top: 0;
    left: 0;
    width: 450px;
    min-height: 250px;
    margin: auto;
  }

  /deep/ .el-dialog .el-dialog__header {
    position: relative;
    display: none;
  }

  /deep/ .el-dialog .el-dialog__body {
    position: relative;
    padding: 0;
    width: 450px;
    min-height: 250px;
  }

  /deep/ .el-dialog .el-dialog__footer {
    position: relative;
    display: none;
  }
</style>
